﻿<div class="page">
<h2>Mui.util.UI</h2>
<div class="info">
	<div><strong>Class:</strong><span>Mui.util.UI</span></div>
	<div><strong>SuperClass:</strong><a href="Mui.Object" class="link">Mui.Object</a></div>
	<div>
		<strong>SubClass:</strong>,
		<a href="Mui.Object" class="link">Mui.util.Panel</a>，
		<a href="Mui.Object" class="link">Mui.util.Tab</a>，
		<a href="Mui.Object" class="link">Mui.util.Viewport</a>
	</div>
</div>

<h3>说明：</h3>
<div class="desc">
Mui.util.UI继承自Pui.Object，该类是所有前端组件类的基类，任何前端组件类都继承自该类
</div>

<h3>公共属性:</h3>
<div class="desc">
	<div class="desc-item">
		<div><em>id：</em><span>一般空间的渲染顺序是在renderTo指定的容器中渲染一个main容器，该main容器一般为div元素，元素的id即为该值，可以为空</span></div>
		<div>类型：string</div>
		<div>默认值：空，自动生成</div>
	</div>
	<div class="desc-item">
		<div><em>renderTo：</em><span>控件渲染的容器的ID，该容器一般为一个DIV容器</span></div>
		<div>类型：string</div>
		<div>默认值：空，自动生成</div>
	</div>
	<div class="desc-item">
		<div><em>height：</em><span>控件的高度</span></div>
		<div>类型：number</div>
		<div>默认值：200</div>
	</div>
	<div class="desc-item">
		<div><em>width：</em><span>控件的宽度</span></div>
		<div>类型：number</div>
		<div>默认值：0</div>
	</div>
	<div class="desc-item">
		<div>
		<em>autoRender</em><span>容器是否自动渲染，有些控件可能会通过另外控件的add方法进行添加，此时需要设置该空间的autoRender为false,并在add动作结束后进行渲染</span>
		<div>类型：boolean</div>
		<div>默认值：true</div>
		
		</div>
	</div>
</div>

<h3>私有属性:</h3>
<div class="desc">
	<div class="desc-item">
		<div><em>__constructor</em><span>
		全局构造函数名
		</span>
		</div>
		<div>类型：string</div>
		<div>默认值：Pui.util.UI</div>
	</div>
	<div class="desc-item">
		<div><em>__children</em><span>
		子控件集合，key/value形式存储的map,key为控件的id，value为控件的对象本身
		</span>
		</div>
		<div>类型：string</div>
		<div>默认值：Pui.util.UI</div>
	</div>
	<div class="desc-item">
		<div><em>__hidden</em><span>
		标识控件是否隐藏的是有属性，当控件隐藏，即调用了hide方法时，该属性值为true,调用了show方法是，该属性值为false
		</span>
		</div>
		<div>类型：string</div>
		<div>默认值：Pui.util.UI</div>
	</div>
</div>



<h3>方法:</h3>
<div class="desc">
	<div class="desc-item">
		<div><em>getEl()</em>
		<span>
			获取控件渲染的容器的jQuery对象，即$('#'+this.renderTo);
		</span>
		</div>
		<div>参数：无</div>
		<div>返回值：控件渲染容器</div>
		<div>返回值类型：jQuery Object</div>
	</div>
	<div class="desc-item">
		<div><em>init()</em>
		<span>
			所有控件初始化的入口，在该入口中主要对配置控件的默认样式进行配置，并调用render()方法进行渲染
		</span>
		</div>
		<div>参数：无</div>
		<div>返回值：无</div>
	</div>
	<div class="desc-item">
		<div><em>render()</em>
		<span>
			所有控件用于渲染的入口方法，控件的渲染动作均在这个方法中完成，执行方法前判断autoRender属性
		</span>
		</div>
		<div>参数：无</div>
		<div>返回值：无</div>
	</div>
	<div class="desc-item">
		<div><em>destory()</em>
		<span>
			销毁控件，销毁控件对象、移除控件的渲染容器
		</span>
		</div>
		<div>参数：无</div>
		<div>返回值：无</div>
	</div>
	<div class="desc-item">
		<div><em>clear()</em>
		<span>
			清空控件的渲染容器，常用于对控件的再次渲染前执行
		</span>
		</div>
		<div>参数：无</div>
		<div>返回值：无</div>
	</div>
	<div class="desc-item">
		<div><em>show()</em>
		<span>
			显示控件，通常操作的是控件的渲染容器
		</span>
		</div>
		<div>参数：无</div>
		<div>返回值：无</div>
	</div>
	<div class="desc-item">
		<div><em>hidden()</em>
		<span>
			隐藏控件，通常隐藏的是控件的渲染容器
		</span>
		</div>
		<div>参数：无</div>
		<div>返回值：无</div>
	</div>
	<div class="desc-item">
		<div><em>toggle()</em>
		<span>
			显示（隐藏）控件，在控件隐藏的时候执行显示，显示的时候执行隐藏
		</span>
		</div>
		<div>参数：无</div>
		<div>返回值：无</div>
	</div>
	<div class="desc-item">
		<div><em>getHeight()</em>
		<span>
			获取控件的高度
		</span>
		</div>
		<div>参数：无</div>
		<div>返回值：控件的高度</div>
		<div>返回值类型：number</div>
	</div>
	
	<div class="desc-item">
		<div><em>getWidth()</em>
		<span>
			获取控件的宽度
		</span>
		</div>
		<div>参数：无</div>
		<div>返回值：控件的宽度</div>
		<div>返回值类型：number</div>
	</div>
	
	<div class="desc-item">
		<div><em>getSize()</em>
		<span>
			获取控件的高度和宽度
		</span>
		</div>
		<div>参数：无</div>
		<div>返回值：控件的宽度和高度的object，{width:100,height:100}</div>
		<div>返回值类型：object</div>
	</div>
	
	<div class="desc-item">
		<div><em>setHeight(number height)</em>
		<span>
			设置控件的高度
		</span>
		</div>
		<div>参数：<br/>
			<strong>height：</strong>需要设置的高度
		</div>
		<div>返回值：无</div>
	</div>
	
	<div class="desc-item">
		<div><em>setWidth(number width)</em>
		<span>
			设置控件的宽度
		</span>
		</div>
		<div>参数：<br/>
			<strong>width:</strong>需要设置的宽度
		</div>
		<div>返回值：无</div>
	</div>
	
	<div class="desc-item">
		<div><em>setSize(object size)</em>
		<span>
			设置控件的尺寸大小
		</span>
		</div>
		<div>参数：<br/>
			<strong>size:</strong>包含控件高度和宽度的object，例如：{width:100,height:200}
		</div>
		<div>返回值：无</div>
	</div>
	
	<div class="desc-item">
		<div><em>resize()</em>
		<span>
			根据控件的width和height属性，调用setHeight，setWidth方法重设控件的高度和宽度
		</span>
		</div>
		<div>参数：无
		</div>
		<div>返回值：无</div>
	</div>
	
	<div class="desc-item">
		<div><em>fixed()</em>
		<span>
			将控件的高度和宽度，调整为控件填充渲染容器的父容器的大小
		</span>
		</div>
		<div>参数：无
		</div>
		<div>返回值：无</div>
	</div>
	
	<div class="desc-item">
		<div><em>findEl(string selector)</em>
		<span>
			在控件渲染的容器中查找元素，见jQuery对象的find
		</span>
		</div>
		<div>参数：
			<strong>selector:</strong>选择器，参见jQuery的元素选择器
		</div>
		<div>返回值：找到的元素对象</div>
		<div>返回值类型：jQuery Object</div>
	</div>
	
</div>